<template>
	<view class="order-detail-container">
		<!-- 订单状态 -->
		<view class="order-card">
			<view class="order-status">
				<view class="order-status-text">{{ orderStatus.text }}</view>
				<view class="order-status-desc">{{ orderStatus.desc }}</view>
			</view>

			<!-- 物流信息 -->
			<view class="order-info-section">
				<view class="order-info-title">物流信息</view>
				<view class="order-timeline">
					<view v-for="(item, index) in logistics" :key="index" class="timeline-item"
						:class="{ active: index === 0 }">
						<view class="timeline-time">{{ item.time }}</view>
						<view class="timeline-content">{{ item.content }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 收货地址 -->
		<view class="order-card">
			<view class="order-info-section">
				<view class="order-address">
					<view class="order-address-icon">
						<uni-icons type="location-filled" size="18" color="var(--primary-color)"></uni-icons>
					</view>
					<view class="order-address-content">
						<view class="order-address-name">{{ address.name }}</view>
						<view class="order-address-phone">{{ address.phone }}</view>
						<view class="order-address-detail">{{ address.detail }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="order-card">
			<view class="order-info-section">
				<view class="order-info-title">商品信息</view>
			</view>

			<view v-for="(product, index) in products" :key="index" class="order-product">
				<view class="order-product-image">
					<image :src="product.image" mode="aspectFill"></image>
				</view>
				<view class="order-product-info">
					<view class="order-product-name">{{ product.name }}</view>
					<view class="order-product-spec">{{ product.spec }}</view>
					<view class="order-product-price">
						<view class="order-product-amount">¥{{ product.price }}</view>
						<view class="order-product-quantity">x{{ product.quantity }}</view>
					</view>
				</view>
			</view>

			<view class="order-summary">
				<view v-for="(item, index) in summary" :key="index" class="order-summary-item">
					<view>{{ item.label }}</view>
					<view :class="{ 'order-summary-value': item.isTotal }">{{ item.value }}</view>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-card">
			<view class="order-info-section">
				<view class="order-info-title">订单信息</view>
				<view v-for="(info, index) in orderInfo" :key="index" class="order-info-row">
					<view class="order-info-label">{{ info.label }}</view>
					<view class="order-info-value">{{ info.value }}</view>
				</view>
			</view>
		</view>

		<!-- 订单操作 -->
		<view class="order-footer">
			<view class="order-actions">
				<button class="order-action-btn" @click="contactService">联系客服</button>
				<button class="order-action-btn primary" @click="confirmReceipt">确认收货</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const orderStatus = ref({
		text: '待收货',
		desc: '包裹已由顺丰速运发出，预计明天送达'
	})

	const logistics = ref([{
			time: '2023-06-15 14:30:25',
			content: '【广州市】已由顺丰速运揽收，正在发往【上海市】'
		},
		{
			time: '2023-06-15 10:15:36',
			content: '【广州市】包裹已出库，等待揽收'
		},
		{
			time: '2023-06-14 18:45:12',
			content: '【广州市】商品已打包完成，准备出库'
		},
		{
			time: '2023-06-14 15:20:45',
			content: '订单已确认，等待商家发货'
		}
	])

	const address = ref({
		name: '张小明 (先生)',
		phone: '138****6666',
		detail: '上海市浦东新区张江高科技园区博云路2号名创优品大厦5楼'
	})

	const products = ref([{
			image: 'https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=928&q=80',
			name: '北欧简约风格陶瓷花瓶',
			spec: '规格：小号 / 白色',
			price: '39.90',
			quantity: 1
		},
		{
			image: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
			name: '多功能便携式充电宝 10000mAh',
			spec: '规格：标准版 / 黑色',
			price: '89.90',
			quantity: 1
		}
	])

	const summary = ref([{
			label: '商品金额',
			value: '¥129.80',
			isTotal: false
		},
		{
			label: '运费',
			value: '¥0.00',
			isTotal: false
		},
		{
			label: '优惠',
			value: '-¥10.00',
			isTotal: false
		},
		{
			label: '实付款',
			value: '¥119.80',
			isTotal: true
		}
	])

	const orderInfo = ref([{
			label: '订单编号',
			value: '2023061512345678'
		},
		{
			label: '下单时间',
			value: '2023-06-14 14:25:36'
		},
		{
			label: '支付方式',
			value: '微信支付'
		},
		{
			label: '支付时间',
			value: '2023-06-14 14:26:18'
		}
	])

	const contactService = () => {
		// 实现联系客服逻辑
		uni.showToast({
			title: '正在连接客服...',
			icon: 'none'
		})
	}

	const confirmReceipt = () => {
		uni.showModal({
			title: '确认收货',
			content: '确认已收到商品？',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '确认收货成功',
						icon: 'success'
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.order-detail-container {
		padding: 15px;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.order-card {
		background-color: white;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.order-status {
		background-color: var(--primary-color);
		color: white;
		padding: 15px;
		position: relative;

		&-text {
			font-size: 16px;
			font-weight: bold;
		}

		&-desc {
			font-size: 13px;
			margin-top: 5px;
			opacity: 0.9;
		}
	}

	.order-info-section {
		padding: 15px;

		.order-info-title {
			font-size: 15px;
			font-weight: bold;
			margin-bottom: 12px;
		}
	}

	.order-timeline {
		.timeline-item {
			position: relative;
			padding-left: 20px;
			margin-bottom: 15px;

			&:before {
				content: '';
				position: absolute;
				left: 6px;
				top: 8px;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background-color: #ddd;
			}

			&:after {
				content: '';
				position: absolute;
				left: 9px;
				top: 16px;
				width: 2px;
				height: calc(100% + 5px);
				background-color: #ddd;
			}

			&:last-child:after {
				display: none;
			}

			&.active {
				&:before {
					background-color: var(--primary-color);
				}
			}

			.timeline-time {
				font-size: 13px;
				color: #999;
				margin-bottom: 4px;
			}

			.timeline-content {
				font-size: 14px;
				color: #333;
			}
		}
	}

	.order-address {
		display: flex;
		align-items: flex-start;

		.order-address-icon {
			margin-right: 10px;
			margin-top: 2px;
		}

		.order-address-content {
			flex: 1;

			.order-address-name {
				font-size: 15px;
				font-weight: bold;
				margin-bottom: 5px;
			}

			.order-address-phone {
				font-size: 14px;
				color: #666;
				margin-bottom: 5px;
			}

			.order-address-detail {
				font-size: 14px;
				color: #333;
				line-height: 1.4;
			}
		}
	}

	.order-product {
		display: flex;
		padding: 15px;
		border-bottom: 1px solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.order-product-image {
			width: 80px;
			height: 80px;
			margin-right: 12px;
			border-radius: 4px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.order-product-info {
			flex: 1;

			.order-product-name {
				font-size: 14px;
				color: #333;
				margin-bottom: 6px;
				line-height: 1.4;
			}

			.order-product-spec {
				font-size: 13px;
				color: #999;
				margin-bottom: 8px;
			}

			.order-product-price {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.order-product-amount {
					font-size: 15px;
					color: #ff4d4f;
					font-weight: bold;
				}

				.order-product-quantity {
					font-size: 13px;
					color: #999;
				}
			}
		}
	}

	.order-summary {
		padding: 15px;
		background-color: #fafafa;

		.order-summary-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 8px;
			font-size: 14px;
			color: #666;

			&:last-child {
				margin-bottom: 0;
				padding-top: 8px;
				border-top: 1px solid #eee;
			}

			.order-summary-value {
				color: #ff4d4f;
				font-weight: bold;
				font-size: 16px;
			}
		}
	}

	.order-info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-size: 14px;

		&:last-child {
			margin-bottom: 0;
		}

		.order-info-label {
			color: #666;
		}

		.order-info-value {
			color: #333;
		}
	}

	.order-footer {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 15px;

		.order-actions {
			display: flex;
			gap: 12px;

			.order-action-btn {
				width: 120px;
				padding: 6px 12px;
				border-radius: 15px;
				font-size: 12px;
				border: 1px solid #ddd;
				background-color: #fff;

				&.primary {
					background-color: var(--primary-color);
					color: white;
					border: none;
				}

				&::after {
					border: none;
				}
			}
		}
	}
</style>